<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // 1.创建map
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]])
        // console.log(map)
        // map.set("hello","world")
        // console.log(map)

        // 2.通过键名获取键值
        // let res = map.get('age')
        // console.log(res)

        // 3.map的keys和values
        // let keys = map.keys()
        // let values = map.values()
        // console.log(keys, values)

        // 4.把元素作为键名
        let lis = document.querySelectorAll('ul li')
        let map = new Map()
        map.set(lis[0], 'red')
        console.log(map)
        map.set(lis[1], 'green')
        console.log(map)
        map.set(lis[2], 'blue')
        console.log(map)
        // 根据map数据渲染页面
        map.forEach((item, key)=>{
            key.style.color = item
        })











    </script>
</body>
</html>